Designing MPL's illustration language
I joined MPL in September 2021, I was very excited to begin a new chapter in the mobile gaming industry. The existing visuals and the illustrations didn’t match the brand’s bold and energetic voice. So this is where the idea of creating a new illustration style sparked, we needed new illustrations that aligned with the brand’s message. We collated all the existing illustrations to evaluate where we stand.
The existing illustrations on the MPL app
We identified keywords that represent the brand and found ways to express them visually. We agreed on words like Dynamic, Energetic, Expressive, Competitive, Heroic, and Fun. We made sure to have a shared understanding of their meanings to create a common vocabulary.
We took a fun and simple approach to the task. We gathered a bunch of us and started throwing all the cool illustrations we found online into Figma and created mood boards. Then we sorted them into categories based on how they made us feel. If an image gave us a rush of energy, it went in the “energetic” box. If it made us smile and laugh, it went straight into the “fun” box.
Mood Board and the categorization
Once we had the categories in place, we further deep dived into each of the category which resonated with the brand and then studied each of the illustrations. What made the illustration to be energetic, dynamic or exciting, this study helped us to understand the characteristics of the categories and gave us pointers which we could follow in our illustrations too.
Category wise breakdown
We ended up with a super cool set of visual guidelines that helped us give meaning to each brand keyword. As illustrators, we were already familiar with these words, but this exercise gave a shared vocabulary to the entire design team. That way, giving feedback and suggestions became much easier.
Visual rules that we decided to base our illustration style on were:
Line of action, Single point of focus, Dynamic poses(non-symmetric), Sharp edges, Open posture, and Heroism (character placed slightly above eye level).
Line of action, Single point of focus, Dynamic poses(non-symmetric), Sharp edges, Open posture, and Heroism (character placed slightly above eye level).
Based on the guidelines, we further explored how we can use these principles into ur system and how actually the illustrations will look like. So we went into a lot of bad sketches, I love to do bad sketches as it just helps me put in all my thoughts and quickly see how things will turn up. We took up existing illustrations and tried to revamp them according to the set guidelines.
Concept exploration sketches
These gave us clarity in terms of execution and gave the entire team confidence that the system was working perfectly. To give it more context we started visualising how the mobile screens will look like, we started restricting some thoughts because the scale matters the most. We had to think according to the smaller sizes of mobile screens and design characters and illustrations which have all the principles yet are legible and are clearly communicated to the users.
Sketching for the screens
This was a turning point for us as it gave us a very good base where all of us were aligned. With that came the freedom to explore and go crazy.
To create our illustrations, we focused on a small group of characters to ensure their expressions and poses were perfect. Humans were the main focus, as their style would influence smaller illustrations and icons. We chose four diverse and memorable characters to represent MPL’s wide range of games. We wanted to avoid overcrowding and keep it simple. Here is the process which we further followed
Silhouette exploration for characters
We fixed on few silhouettes and then started adding details and creating the characters further on
Adding personality to the characters after fixing the structure.
Final sketches of the characters
Keeping the visual understanding we got through the mood board exercise. We developed language for light shadows and clothes.
Once we had all the characters ready, we started expanding the same system into other screens and interactions.
How we revamped old illustrations with the new illustration style
With our new illustration style now implemented and in full swing, we know that the creative process never truly ends. It requires constant tweaking and updates to keep it fresh and relevant to our brand. But despite the ongoing evolution, we’ve already received some amazing feedback from our users!
“Design toh best hai, ye sab toh badhiya hai” (“The design is amazing, everything is great”)
“Bohot attractive lag raha tha design” (“The design was very attractive”)
“Design accha laga, attract ho raha tha sab aadmi idher.” (“The design was good and everyone was being attracted to it”)
“Dekhne main bhi new tha, thoda alag tha, interesting bhi tha” (“It looked new, a bit different, and interesting to look at”)
We have been able to automate 60% percent requirements by reusing Illustration library assets. Library has been instrumental in giving us bandwidth and space to be able to experiment faster and more efficiently.
When the illustration team was tasked with shaking things up, we knew we were in for a wild ride! But hey, that’s what we signed up for, right? We embraced the challenge with open arms and got to work. And let me tell you, we learned a ton along the way! But the journey didn’t end there. We still had some hurdles to jump over, starting with planning the implementation and aligning updates with releases. And, let’s not forget making sure everyone on the team knew what the new illustration style was all about. But with the support of our amazing design team, we nailed it!
